<template>
	<a-form
		ref="formRef"
		:model="formState"
		:rules="rules"
		:colon="false"
		:label-col="labelCol"
		:wrapper-col="wrapperCol"
	>
		<a-card title="应用上架" :headStyle="hstyle">
			<a-row :gutter="70">
				<a-col :span="8">
					<a-form-item label="应用名称" name="name">
						<a-input v-model:value="formState.name" />
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-form-item label="应用分类" name="name">
						<a-select v-model:value="formState.name" :options="options1" style="width: 100%" placeholder="请选择">
						</a-select>
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-form-item label="应用范围" name="name">
						<a-select v-model:value="formState.name" :options="options1" style="width: 100%" placeholder="请选择">
						</a-select>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="70">
				<a-col :span="8">
					<a-form-item label="应用ID" name="name">
						<a-input v-model:value="formState.name" />
					</a-form-item>
				</a-col>
				<!-- <a-col :span="8">
					<a-form-item label="应用关键字" name="name">
						<a-select v-model:value="formState.name" :options="options1" style="width: 100%" placeholder="请选择">
						</a-select>
					</a-form-item>
				</a-col> -->
				<a-col :span="8">
					<a-form-item label="应用介绍" name="name">
						<a-input v-model:value="formState.name" />
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="70">
				<a-col :span="8">
					<a-form-item label="应用联系人" name="name">
						<a-input v-model:value="formState.name" />
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-form-item label="应用状态" name="name">
						<a-radio-group name="radioGroup" v-model:value="formState.a">
							<a-radio value="1">有效</a-radio>
							<a-radio value="2">无效</a-radio>
						</a-radio-group>
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-form-item label="平台归属" name="name">
						<a-select v-model:value="formState.name" :options="options1" style="width: 100%" placeholder="请选择">
						</a-select>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="70">
				<a-col :span="8">
					<a-form-item label="版本号" name="name">
						<a-input v-model:value="formState.name" />
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-form-item label="版本说明" name="name">
						<a-input v-model:value="formState.name" />
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-form-item label="应用来源" name="name">
						<a-select v-model:value="formState.name" :options="options1" style="width: 100%" placeholder="请选择">
						</a-select>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="16">
				<a-col :span="8">
					<a-form-item label="应用logo" name="name">
						<a-upload
							v-model:file-list="formState.img"
							class="avatar-uploader"
							list-type="picture-card"
							:show-upload-list="false"
							:custom-request="customRequest"
							accept="image/png, image/jpeg, image/jpg"
						>
							<img v-if="imageUrl" :src="imageUrl" alt="avatar" style="max-height: 100px; max-width: 100px" />
							<div v-else>
								<plus-outlined />
							</div>
						</a-upload>
					</a-form-item>
				</a-col>
			</a-row>
		</a-card>

		<a-card title="上传HTML5端" :headStyle="hstyle" style="margin-top: 15px">
			<a-row :gutter="70">
				<a-col :span="8">
					<a-form-item label="是否鉴权" name="name">
						<div style="display: flex; align-items: center">
							<a-tooltip placement="top">
								<template #title>
									<span>prompt text</span>
								</template>
								<QuestionCircleOutlined style="color: red" />
							</a-tooltip>
							<a-radio-group name="radioGroup" v-model:value="formState.a" style="margin-left: 8px">
								<a-radio value="1">是</a-radio>
								<a-radio value="2">否</a-radio>
							</a-radio-group>
						</div>
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-form-item label="是否鉴权" name="name">
						<div style="display: flex; align-items: center">
							<a-tooltip placement="top">
								<template #title>
									<span>prompt text</span>
								</template>
								<QuestionCircleOutlined style="color: red" />
							</a-tooltip>
							<a-radio-group name="radioGroup" v-model:value="formState.a" style="margin-left: 8px">
								<a-radio value="1">是</a-radio>
								<a-radio value="2">否</a-radio>
							</a-radio-group>
						</div>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="70">
				<a-col :span="8">
					<a-form-item label="单点地址" name="name">
						<a-input v-model:value="formState.name" />
					</a-form-item>
				</a-col>
			</a-row>

			<a-row :gutter="70">
				<a-col :span="8">
					<a-form-item label="是否接待办" name="name">
						<a-radio-group name="radioGroup" v-model:value="formState.a" style="margin-left: 8px">
							<a-radio value="1">是</a-radio>
							<a-radio value="2">否</a-radio>
						</a-radio-group>
					</a-form-item>
				</a-col>
			</a-row>
			<!-- 是否接待办 -->
			<template v-if="formState.a === '1'">
				<a-row :gutter="70">
					<a-col :span="8" :offset="1"> </a-col>
				</a-row>
				<a-row :gutter="70">
					<a-col :span="8" :offset="1">
						<a-form-item label="待办所属分类" name="name">
							<div style="display: flex; align-items: center">
								<a-tooltip placement="top">
									<template #title>
										<span>prompt text</span>
									</template>
									<QuestionCircleOutlined style="color: red" />
								</a-tooltip>
								<a-input v-model:value="formState.name" style="margin-left: 8px" />
							</div>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="70">
					<a-col :span="8" :offset="1">
						<a-form-item label="待办所属分类" name="name">
							<div style="display: flex; align-items: center">
								<a-tooltip placement="top">
									<template #title>
										<span>prompt text</span>
									</template>
									<QuestionCircleOutlined style="color: red" />
								</a-tooltip>
								<a-input v-model:value="formState.name" style="margin-left: 8px" />
							</div>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="70">
					<a-col :span="8" :offset="1">
						<a-form-item label="待办所属分类" name="name">
							<div style="display: flex; align-items: center">
								<a-tooltip placement="top">
									<template #title>
										<span>prompt text</span>
									</template>
									<QuestionCircleOutlined style="color: red" />
								</a-tooltip>
								<a-input v-model:value="formState.name" style="margin-left: 8px" />
							</div>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="70">
					<a-col :span="8" :offset="1">
						<a-form-item label="待办所属分类" name="name">
							<div style="display: flex; align-items: center">
								<a-tooltip placement="top">
									<template #title>
										<span>prompt text</span>
									</template>
									<QuestionCircleOutlined style="color: red" />
								</a-tooltip>
								<a-input v-model:value="formState.name" style="margin-left: 8px" />
							</div>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="70">
					<a-col :span="8" :offset="1">
						<a-form-item label="待办所属分类" name="name">
							<div style="display: flex; align-items: center">
								<a-tooltip placement="top">
									<template #title>
										<span>prompt text</span>
									</template>
									<QuestionCircleOutlined style="color: red" />
								</a-tooltip>
								<a-input v-model:value="formState.name" style="margin-left: 8px" />
							</div>
						</a-form-item>
					</a-col>
				</a-row>
			</template>
		</a-card>

		<a-card title="灰度成员" :headStyle="hstyle" style="margin-top: 15px">
			<Table></Table>
		</a-card>
		<a-card title="图片信息" :headStyle="hstyle" style="margin-top: 15px"> </a-card>
	</a-form>
</template>

<script setup name="appUp">
import Table from './component/table.vue'
const formState = reactive({
	name: '',
	a: '',
	img: []
})
const formRef = ref()
const hstyle = ref({ 'font-size': '18px', 'font-weight': '600' })
const rules = {
	name: [{ required: true, message: 'name', trigger: 'blur' }]
}

const labelCol = { span: 6 }
const options1 = reactive([
	{
		value: 'jack',
		label: 'Jack'
	},
	{
		value: 'lucy',
		label: 'Lucy'
	},
	{
		value: 'disabled',
		label: 'Disabled',
		disabled: true
	},
	{
		value: 'yiminghe',
		label: 'Yiminghe'
	}
])
</script>

<style scoped>
</style>
